<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    #celan_div{
        background-color: rgb(84,199,211);
        text-align: center;
    }
    h2{
        color: #FBFBFB;
        font-size: 30px;
        font-family:Franklin Gothic Medium;
        font-weight:bold;
        margin-top: 27px;
    }
    #beij_div2{
        background-color: rgb(84,199,211);
        padding-top: 10px;
    }
    #beij_div3{
        background-color: rgb(84,199,211);
        border-left:thick solid #f8f9fa;
    }
    #app{
        background-color: rgb(61,73,85);
        height: 666px;
    }
    #rou_div{
        height: 97px;
    }
    #beij_div{
        background-color: rgb(248,244,240);
        height: 666px;
    }
    .hello_p{
        color: #f8f9fa;
        margin-top: 20px;
        font-size: 20px;
        font-weight: bold;
    }
    /*滚动条样式 */
    .menu {
        height: 500px;
        padding: 0px;
        overflow: auto;
    }
    #card_id{
        text-align: center;
        font-size: 25px;
        background-color: rgb(61,73,85);
    }
    li{
        list-style: none;
        color: #c8cbcf;
        text-align: center;
        cursor: pointer;
        font-size: 20px;
        line-height: 50px;
    }
    li:hover{
        background: #86cfda;
    }

    #card_div{
        padding: 0px;
    }
    #tou_img{
        width:50px;
        height: 50px;
        border-radius: 30px;
        margin-top: 7px;
        margin-left: 25px;
    }
    #tou_p{
        display: inline-block;
        margin-top: 20px;
        font-size: 25px;
        color: #FBFBFB;
        font-family: STXinwei;
    }
    .lie_ul{
        padding: 0px;
    }
    body{
        height: 100%;
    }
    #beij_div3 a{
        color: #FBFBFB;
        font-size: 18px;
        margin-left: 5px;
    }
</style>
<body>
<div class="container-fluid">
    <!--   row   一行  -->
    <div class="row" id="rou_div">
        <div class="col-xl-2" id="celan_div">
            <h2>进销存管理系统</h2>
        </div>
        <div class="col-xl-8" id="beij_div2">
            <p class="hello_p">-->您好，欢迎登录阳光环球管理系统后台！</p>
        </div>
        <div class="col-xl-2" id="beij_div3">
            <img src="style/img/tou.jpg" id="tou_img">
            <p id="tou_p">yang</p>
            <a class="btn btn-info" href="Login.html">退出</a>
        </div>
    </div>
    <!--   row   一行  -->
    <div class="row">
        <div class="col-xl-2 menu" id="app">
            <div id="accordion">
                <div class="card" id="card_id" v-for="menu in employee.menuList">
                    <div class="card-header">
                        <a style="color: white" class="card-link" data-toggle="collapse" :href="'#menu'+menu.menuId">
                            {{menu.menuName}}&nbsp;&nbsp;>
                        </a>
                    </div>
                    <div :id="'menu' + menu.menuId" class="collapse hide" data-parent="#accordion">
                        <div class="card-body" id="card_div">
                            <ul class="lie_ul">
                                <li id="menu_li" style="color: white" v-for="subMenu in menu.subMenu" v-on:click="openMenu(subMenu.menuUrl)">{{subMenu.menuName}}

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-10" id="beij_div">
            <!-- 内容主体区域 -->
            <div style="padding: 15px; height: 100%">
                <iframe style="height: 100%" frameborder = 0 id = "content-iframe" width = "100%"></iframe>
            </div>
        </div>
    </div>
</div>


<script src="style/jquery-3.3.1.js"></script>
<script src="style/vue.js"></script>
<script src="style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
<script>

    // 加载菜单列表
    $.ajax({
        type: "post",
        url: "Menu/getMenu",
        dataType: "json",
        success: function (json) {
            let app = new Vue({
                el: '#app',
                data: json,
                methods: {// iframe内容展示
                    openMenu: function (url) {
                        // 使用jquery设置iframe标签的src路径
                        // jquery方法 show hide val each bind
                        $("#content-iframe").attr("src", url);

                    }
                }
            })
        }
    });


        // $("#menu_li").click(function (){
        //     //$("#menu_li").css("background","#86cfda")
        // })


    </script>
</body>
</html>